<template>
  <div class="singer-detail">
    <div class="singer-detail_cover">
      <img :src="`${singerDetail?.picUrl}?param=700y700`" alt="" />
      <van-icon name="arrow-left" class="icon" @click="$router.back()"></van-icon>
      <div class="singer-detail_cover_content">
        <b>{{ singerDetail?.name }}</b>
        <p>音乐数量 {{ singerDetail?.musicSize }}</p>
      </div>
    </div>
    <div class="singer-detail_contain">
      <van-tabs v-model:active="currentActive" sticky swipeable>
        <van-tab title="歌曲">
          <fs-song-item
            :order="index + 1"
            :is-search="false"
            :music-detail="item"
            color="var(--font-color)"
            light-color="var(--font-light-color)"
            v-for="(item, index) in musicList"
            :key="index"
          />
        </van-tab>
        <van-tab title="专辑">
          <van-list
            v-model:loading="albumState.loading"
            :finished="albumState.finished"
            :immediate-check="false"
            @load="handleAlbumLoad"
          >
            <fs-album-item
              v-for="(item, index) in albumState.albumList"
              :album-detail="item"
              :key="index"
              color="var(--font-color)"
              light-color="var(--font-light-color)"
            />
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <van-overlay :show="showLoading" @click="showLoading = false" z-index="1004">
      <div class="wrapper" @click.stop>
        <van-loading color="#fff" vertical>加载中</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script setup lang="ts">
import { ref, onActivated, onDeactivated, reactive } from "vue";
import FsSongItem from "@/components/FsSongItem/FsSongItem.vue";
import FsAlbumItem from "@/components/FsAlbumItem/FsAlbumItem.vue";
import { useRoute } from "vue-router";
import { getSingerDetail, getSingerAlbum } from "@/service/api/musicRequest";
import type { ISearchSongItem } from "@/types/music/searchSongType";
import type { IAlbumItem } from "@/types/music/albumType";
import type { ISingerItem } from "@/types/music/singerType";

const $route = useRoute();
const currentActive = ref(0),
  showLoading = ref(false),
  singerDetail = ref<ISingerItem>(),
  musicList = ref<ISearchSongItem[]>([]);

const albumState = reactive({
  loading: false,
  finished: false,
  offset: 0,
  limit: 20,
  albumList: [] as IAlbumItem[],
});
onActivated(() => {
  showLoading.value = true;
  getSingerDetail(Number($route.params.id)).then((res) => {
    singerDetail.value = res.artist;
    musicList.value = res.hotSongs;
    showLoading.value = false;
  });
});

onDeactivated(() => {
  singerDetail.value = undefined;
  musicList.value = [];
});

const handleAlbumLoad = () => {
  getSingerAlbum({ id: Number($route.params.id), offset: albumState.offset, limit: albumState.limit }).then((res) => {
    albumState.albumList.push(...res.hotAlbums);
    albumState.loading = false;
    if (!res.more) {
      albumState.finished = true;
    } else {
      albumState.offset += albumState.limit;
    }
  });
};
</script>

<style scoped lang="scss">
.singer-detail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 1003;
  background: var(--box-color);
  color: var(--font-color);

  &_cover {
    position: relative;
    width: 100%;
    height: 45vh;
    .icon {
      position: absolute;
      top: 20px;
      left: 10px;
      color: #fff;
      font-size: 20px;
      z-index: 2;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &_content {
      position: absolute;
      bottom: 40px;
      left: 20px;
      color: #fff;
      z-index: 2;
      b {
        font-size: 20px;
      }
    }
    &:after {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
  }
  &_contain {
    position: absolute;
    width: 100%;
    height: 60vh;
    background-color: var(--box-color);
    top: 40vh;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    z-index: 1;
    :deep() {
      .van-tabs__wrap .van-tabs__nav {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        background-color: var(--box-color);
      }
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
</style>
